<template>
  <div
    :class="{'c-justify-sb': isJustifyCenter, 'c-bg-white': !isSetPageBackground}" class="c-flex-row c-flexw-wrap c-ph24 c-pv24"
    :style="item.styleParam && item.styleParam.marginSettings ? getVerticalSpacing(item.styleParam.marginSettings) : ''"
  >
    <template v-if="item.templateType != 3">
      <div v-for="(it,index) in item.items"
        v-if="it.enableNav == 1 && !(isiOS && it.navId == 'spread') && !((it.navId == 'mallNewProduct' || it.navId == 'mallHotsale' || it.navId == 'mallOrder' || it.navId == 'mallAll') && companyAuth.enableMallModule == 0) && (!$isWxApp() || (it.navId != 'daySign' && $isWxApp()))"
        @click="clickItem(it)" :key="index"
        :style="{width: navigateWidth + '%'}"
        class="c-flex-column c-aligni-center c-textAlign-c c-cursor-p c-p"
        :class="navigateBottom(index) ? 'c-pb24' : ''"
      >
        <div v-if="it.isImg && item.templateType != 2" class="c-flex-row c-justify-center c-aligni-center">
          <img :src="$addXossFilter(it.image)" class="c-br4 c-mlr-auto" :class="it.iconSize == 'large' ? 'c-ww56 c-hh56' : (it.iconSize == 'normal' ? 'c-ww48 c-hh48' : 'c-ww40 c-hh40')" alt="" />
          <!-- 图片有60，50，40 -->
        </div>
        <span v-else-if="!it.isImg && it.navId && item.templateType != 2"
          class="icon iconfont c-flex-row c-justify-center c-aligni-center theme-fc"
          :class="[it.iconSize == 'large' ? 'c-ww56 c-hh56 c-fs56' : (it.iconSize == 'normal' ? 'c-ww48 c-hh48 c-fs48' : 'c-ww40 c-hh40 c-fs40')]"
          v-html="getIconMap(it)"
        ></span>
        <span class="c-ws-bs" :class="[item.templateType == 2 ? (it.iconSize == 'large' ? 'c-fs24' : (it.iconSize == 'normal' ? 'c-fs22' : 'c-fs20')) : 'c-fs22', pageTextColor ? 'pageTextColor' : 'c-fc-xblack', ((it.isImg && item.templateType != 2) || (!it.isImg && it.navId && item.templateType != 2) ? 'c-pt16' : '')]">{{(isBCompany == 1 && it.navId == 'addTeacher') ? '蜜友客服' : it.navText}}</span>
        <template v-if="!$isWxApp() && it.appID && it.navHref">
          <wx-open-launch-weapp
            :id="'launchBtn'"
            :appId="it.appID"
            :path="it.navHref"
            class="c-w100 c-h c-text-hidden c-pa c-p-t0 c-p-l0"
            @error="handleErrorFn"
            @launch="handleLaunch"
            @ready="handleReady"
          >
            <script type="text/wxtag-template">
              <style>.masker {width: 100%;height: 70px;opacity: 0}</style>
              <span class="masker">立即跳转</span>
            </script>
          </wx-open-launch-weapp>
        </template>
      </div>
    </template>
    <div v-else-if="item.templateType == 3" class="c-w100 c-br14 c-p c-pz1 c-pv28 c-ph28 c-flex-column c-justify-sb c-text-hidden" :class="item.cardBackgroundStyle == 0 ? 'bg' : ''" :style="getCardBgStyle(item)">
      <div class="c-p c-pz1">
        <div class="c-flex-row c-aligni-center c-justify-sb">
          <div class="c-flex-row c-aligni-center" :style="getCardCustomColor(item)">
            <img class="c-brp50 c-ww48 c-hh48" :src="$addXossFilter(userHeadImg, require('@/assets/defult_head.png'))" alt="">
            <p class="c-fs24 c-fw500 c-ml14 c-lh34">{{userName}}</p>
            <p class="c-fs20 c-opacity50 c-ml8 c-lh28">{{getVipName()}}</p>
          </div>
          <div @click="clickItem({navId:'upgradeVip'})" class="c-br24 c-hh42 c-ww126 c-flex-row c-flex-center"
            :class="item.cardBackgroundStyle == 0 ? 'bd1-white2' : ''"
            :style="'background-color: ' + ([0, 2, 3].includes(item.cardBackgroundStyle) ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 233, 188, 1)')">
            <img class="c-ww24" src="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/vip/vip-up-icon.png" alt="">
            <span class="c-fs18 c-ml4 c-fw500" :style="item.cardBackgroundStyle == 3 ? 'color: rgba(45, 26, 85, 1)' : item.cardBackgroundStyle != 0 ? 'color: ' + themeColor[item.cardBackgroundStyle - 1].fontColor : ''">升级会员</span>
          </div>
        </div>
        <div class="c-w100 c-hh2 c-bg-white c-opacity20 c-mt28"></div>
        <div class="c-flex-row c-aligni-center c-flexw-wrap" :class="{'c-justify-sb': isJustifyCenter}">
          <div v-for="(it,index) in item.items" v-if="it.enableNav == 1 && !(isiOS && it.navId == 'spread') && !((it.navId == 'mallNewProduct' || it.navId == 'mallHotsale' || it.navId == 'mallOrder' || it.navId == 'mallAll') && companyAuth.enableMallModule == 0) && (!$isWxApp() || (it.navId != 'daySign' && $isWxApp()))" @click="clickItem(it)" :key="index" :style="{width: navigateWidth + '%'}" class="c-flex-column c-flex-center c-mt28">
            <img v-if="it.isImg" :src="$addXossFilter(it.image)" :class="it.iconSize == 'large' ? 'c-ww56 c-hh56' : (it.iconSize == 'normal' ? 'c-ww48 c-hh48' : 'c-ww40 c-hh40')" alt="">
            <div v-else-if="!it.isImg && it.navId" class="c-bg-white c-brp50 c-flex-shrink0 c-flex-column c-flex-center" :class="it.iconSize == 'large' ? 'c-ww56 c-hh56' : (it.iconSize == 'normal' ? 'c-ww48 c-hh48' : 'c-ww40 c-hh40')">
              <span
                class="icon iconfont c-flex-row c-justify-center c-aligni-center theme-fc"
                :style="item.cardBackgroundStyle != 0 ? 'color: ' + themeColor[item.cardBackgroundStyle == 3 ? item.cardBackgroundStyle - 2 : item.cardBackgroundStyle - 1].fontColor : ''"
                :class="[it.iconSize == 'large' ? 'c-ww40 c-hh40 c-fs40' : (it.iconSize == 'normal' ? 'c-ww32 c-hh32 c-fs32' : 'c-ww24 c-hh24 c-fs24')]"
                v-html="getIconMap(it)">
              </span>
            </div>
            <span class="c-mt14 c-hh24 c-fs20" :style="getCardCustomColor(item)">{{(isBCompany == 1 && it.navId == 'addTeacher') ? '蜜友客服' : it.navText}}</span>
          </div>
        </div>
      </div>
      <img class="c-pa c-p-l0 c-p-t0 c-w100 c-pz0" :src="item.backgroundUrl" alt="" v-if="item.backgroundUrl && item.cardBackgroundStyle == 0">
    </div>
  </div>
</template>
<script>
import { custIndex } from "@/mixin/custIndex.js";
import { customStyle } from '@/utils/customStyle.js'
import { utilJs } from "@/utils/common.js";
export default {
  mixins: [custIndex, customStyle],
  components: {
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    upgradeMemberJump: {
      type: String,
      default: ''
    },
    pageName: {//首页 INDEX 预览页 PREVIEW_INDEX 微页面 MICRO_PAGE
      type: String,
      default: "INDEX"
    },
  },
  data() {
    return {
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      navMap: global.navMap,
      themeColor: [{
        fontColor: 'rgba(163, 86, 0, 1)', // 字体颜色
        bgColor: 'background-image: linear-gradient(37deg, #F8DFBE 0%, #F2BB6D 92%)', // 背景颜色
      },
      {
        fontColor: 'rgb(0, 38, 77)', // 字体颜色
        bgColor: 'background-image: linear-gradient(45deg, #D0F7FF 0%, #84D1FF 100%)', // 背景颜色
      },
      {
        fontColor: 'rgb(255, 255, 255)', // 字体颜色
        bgColor: 'background-image: linear-gradient(45deg, #717390 0%, #212548 100%)', // 背景颜色
      }],
      userHeadImg: localStorage.getItem('userHeadImg'),
      userName: localStorage.getItem('userName'),
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
      pageTextColor: sessionStorage.getItem('pageTextColor') || ''
    };
  },
  computed: {
    // 设置卡片自定义颜色
    getCardCustomColor() {
      return function(item) {
        return item.cardBackgroundStyle == 0 && item.isCardCustomColor == 2 && item.cardCustomFontColor ? 'color: ' + item.cardCustomFontColor : ''
      }
    },
    // 设置导航图标映射
    getIconMap() {
      return function(it) {
        let navId = it.iconName && it.iconCode ? it.iconName : it.navId;
        return this.navMap[navId] ? this.navMap[navId].icon : '&#xe65b;'
      }
    },
    // 设置个性化卡片背景
    getCardBgStyle() {
      return function(item) {
      let style = '';
        if (item.cardBackgroundStyle != 0) {
          style = this.themeColor[item.cardBackgroundStyle - 1].bgColor + ';color: ' + this.themeColor[item.cardBackgroundStyle - 1].fontColor;
        }
        return style
      }
    },
    isJustifyCenter() {
      if ((this.item.templateStyle == 5 && this.item.items.length < 5) || (this.item.templateStyle == 4 && this.item.items.length < 4) || (this.item.templateStyle == 3 && this.item.items.length < 3)) {
        return true
      }
    },
    navigateBottom() {
      return function(index) {
        if ((this.item.templateStyle == 5 && (index < (this.item.items.length % 5 != 0 ? (this.item.items.length - this.item.items.length % 5) : (this.item.items.length - 5))) && this.item.items.length > 5) ||
          (this.item.templateStyle == 4 && (index < (this.item.items.length % 4 != 0 ? (this.item.items.length - this.item.items.length % 4) : (this.item.items.length - 4))) && this.item.items.length > 4) ||
          (this.item.templateStyle == 3 && (index < (this.item.items.length % 3 != 0 ? (this.item.items.length - this.item.items.length % 3) : (this.item.items.length - 3))) && this.item.items.length > 3)
        ) {
          return true
        } else {
          false
        }
      }
    },
    navigateWidth() {
      if (this.item.templateStyle == 5 && this.item.items.length > 5) {
        return 20
      } else if (this.item.templateStyle == 4 && this.item.items.length > 4) {
        return 25
      } else if (this.item.templateStyle == 3 && this.item.items.length > 3) {
        return 33.3
      } else {
        return (100 / this.item.items.length)
      }
    }
  },
  methods: {
    handleLaunch(e) {
      console.log('handleLaunch---', e)
    },
    handleErrorFn(e) {
      this.$showCjToast({
        text: e.errMsg || '无法打开小程序，请升级微信版本',
        type: "warn",
        time: 1500
      })
    },
    handleReady(e) {
      console.log('handleReady---', e)
    },
    getVipName() {
      let vipType = localStorage.getItem("vipType" + localStorage.getItem("userId"));
      let nameMap = utilJs.getCustNameMap();
      return nameMap[vipType] || ''
    },
    // 点击导航
    clickItem(data) {
      data.pageName = this.pageName;
      data.upgradeMemberJump = this.upgradeMemberJump;
      data.isnavigation = true;
      if (data.navId == "linkToMiniProgram") {
        if (!localStorage.getItem('isWxApp')) return
        utilJs.checkWxApp(); // 再次调用是为了跳转小程序返回后避免小程序环境值判断错误
        this.$nextTick(() => {
          // 微信需要判断是否是小程序环境 h5跳转采用组件跳转 小程序跳转使用跳转到小程序中间页面再点击跳转到其他小程序
          let query = data.appID ? `?appId=${data.appID}&path=${encodeURIComponent(JSON.stringify(data.navHref))}` : `?shortLink=${encodeURIComponent(data.navHref)}`;
          utilJs.miniProgramGoTo('push', '/pages/home/goWxApp/index' + query);
        })
      }
      this.commonModuleRouterPush(data)
    }
  },
};
</script>

<style scoped>
.search-bg {
  border-radius: 0.2rem;
  background: #f4f7f9;
}
.fixedTop {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  max-width: 16rem;
}
.bg {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bd1-white2 {
  border: 1px solid rgba(255, 255, 255, 0.2);
}
</style>
